<template>
    <div class="guidepage">
        <div class="guidepagebg">
            <img class="guidepagebg-img" src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/产品外部链接详情.jpg" alt="">
        </div>
        <div class="guidepage-text">
            <div id='main'>
                <div class="itemnum"><span style=" display: inline-block; left: 3%;
    position: relative; width: 10px; height: 10px; border-radius: 50%;  background: #f9e4a8;"></span>
                </div>
                <div v-for="(val, index) in numberArr" :key="index">
                    <div style="width:60px;height:40px">
                        <div class="numberScrollPar">
                            <div v-for="i in 10" :key="i">
                                <div class="child">{{ i - 1 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="guidepageyuan">元</span>
            </div>

        </div>
        <div class="guidepageuse" @click="goguidancepage"><img class="guidepageuse-img" src="@/assets/images/login/组 11.png"
                alt="">
            <!-- <audio ref="myaudio">
                    <source src="@/assets/images/red/5a6ad6b4b021f.mp3" />
                </audio> -->
        </div>
        <div class="guidepageshear" @click="shear"><img class="guidepageshear-img" src="@/assets/images/login/组 12.png"
                alt=""></div>
        <!-- <el-button @click="goguidancepage">收下红包</el-button>
        <el-button >立即分享</el-button> -->
        <div @click="falseclick" v-if="isshow" class="bgisshow">
            <img style=" width: 100%; height: 193px; position: fixed; top: 10px; " src="@/assets/images/分享提示页.png" alt="">

        </div>
    </div>
</template>
<script>
import { currentpacketstep, addburyingpoint, getShareData } from '@/api/http.js'
import wx from "weixin-js-sdk";
export default {
    components: {

    },
    data() {
        return {
            isshow: false,
            numberArr: [0, 0, 0],
            appId: 'wx89289c3a3da01e68', //微信公众号唯一标识，在微信公众号后台获取
            title: '每年一次脑健康筛查！',  //分享内容的标题
            desc: '做脑健康筛查也能领红包了，快来看看吧~', // 分享内容的简短描述
            link: 'https://www.ainaoxingdong.com/brainshare/index.html',
            imgUrl: 'https://www.ainaoxingdong.com/api/an-media/images/share.png', //必须是绝对路径,
            t: '',
            n: '',
            s: '',
        }
    },
    methods: {
        goguidancepage() {
            // let music1 = new Audio();
            // music1 = require("@/assets/images/red/5a6ad6b4b021f.mp3");
            // this.$refs.myaudio.src = music1;
            // this.$refs.myaudio.play();
            // console.log( this.$refs.myaudio)
            // debugger
            this.$router.push('/guidancepage')
            let obj = { buriedPointName: '收下红包', function: '1', module: '2', redirectPage: '进入引导页', section: '1', orgNo: '' }
            addburyingpoint(obj).then(res => {
                console.log(res)
            })
        },
        shear() {
            this.isshow = true
            console.log('分享')
        },
        falseclick() {
            this.isshow = false

        },
        getKeyParams() {
            console.log(sessionStorage.getItem('scanUrl'), "=================")
            getShareData({ url: sessionStorage.getItem('scanUrl') }).then((result) => {
                console.log('result', result);
                this.t = result.data.timestamp
                this.n = result.data.nonceStr
                this.s = result.data.signature
                //拿到三个参数之后，调用wxConfig方法进行权限验证
                this.shareMes()
                console.log('@@@@@', this.t, this.n, this.s);

            });
        },
        shareMes() {
            wx.config({
                // 配置参数
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: this.appId, // 必填，公众号的唯一标识
                timestamp: this.t, // 必填，生成签名的时间戳
                nonceStr: this.n, // 必填，生成签名的随机串
                signature: this.s, // 必填，签名
                jsApiList: [
                    'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'
                ]
            });
            wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res, 'checkJsApi')
                }
            });
            this.wxShare();
            console.log('hihihi');
        },
        wxShare() {
            const that = this
            wx.ready(() => {
                wx.updateAppMessageShareData({
                    title: this.title, // 分享标题
                    desc: this.desc,// 分享描述
                    link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: this.imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    }
                });
                wx.updateTimelineShareData({
                    title: this.title, // 分享标题
                    desc: this.desc, // 分享描述
                    link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: this.imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    }
                });
            });
            wx.error(function (res) {
                console.log('生成微信签名失败了');
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            })
        }
    },
    created() {
        // 初始化调接口
        this.getKeyParams();

        var token = localStorage.getItem("token");
        console.log(token)
        if (token) {
            currentpacketstep().then(res => {
                console.log(res.data.router)
                this.$router.push('/' + decodeURIComponent(res.data.router))
            })
        }
    },
    mounted() {
        let obj = { buriedPointName: '卡片链接进入', function: '1', module: '1', redirectPage: '收下红包页', section: '1', orgNo: '' }
        addburyingpoint(obj).then(res => {
            console.log(res)
        })
        let chars = [2, 9, 0]
        this.numberArr[0] = chars[0]
        this.numberArr[1] = chars[1]
        this.numberArr[2] = chars[2]
        console.log(this.numberArr)
        const element = document.getElementsByClassName('numberScrollPar');
        console.log(element.length)
        for (let i = 0; i < element.length; i++) {
            const name = 'numberScroll_' + this.numberArr[i];
            element[i].classList.add(name);
        }

    }

}
</script>
<style scoped>
.guidepage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;

}

.bgisshow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000bf;
    top: 0;
    left: 0;
    z-index: 33;
}

.guidepagebg {
    width: 100%;
    height: 100%;
}

.guidepagebg-img {
    width: 100%;
    height: 100%;
}

.guidepage-text {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 52%;
    font-size: 90px;
    color: #fedf94;
}

.guidepageyuan {
    font-size: 24px;
    color: #fff;
    position: relative;
    top: 36px;
    left: 0;
}

.guidepageuse {
    width: 218px;
    height: 85px;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
}

.guidepageuse-img {
    width: 100%;
    height: 100%;
}

.guidepageshear {
    width: 190px;
    height: 77px;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.guidepageshear-img {
    width: 100%;
    height: 100%;
}


#main {
    width: 375px;
    height: 80px;
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 23px;
    /* background: white; */
    color: #f9e4a8;
    font-size: 80px;
    overflow: hidden;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.itemnum {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    /* -39px */
    transform: translateX(-13%) translateY(-7px);
    z-index: 2;
}

.numberScrollPar {
    width: 100%;
    height: 100%;
    text-shadow: 1px -1px 10px #c20000a6;
}

.child {
    width: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

@keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}


.numberScroll_1 {
    animation: numberScroll1 0.5s;
    -webkit-animation: numberScroll1 0.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}


.numberScroll_2 {
    animation: numberScroll2 1s;
    -webkit-animation: numberScroll2 1s;
    animation-fill-mode: both;
}

@keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}


.numberScroll_3 {
    animation: numberScroll3 1.5s;
    -webkit-animation: numberScroll3 1.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}


.numberScroll_4 {
    animation: numberScroll4 2s;
    -webkit-animation: numberScroll4 2s;
    animation-fill-mode: both;
}

@keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-400px);
    }
}

.numberScroll_5 {
    animation: numberScroll5 2.5s;
    -webkit-animation: numberScroll5 2.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-480px);
    }
}



.numberScroll_6 {
    animation: numberScroll6 1.2s;
    -webkit-animation: numberScroll6 1.2s;
    animation-fill-mode: both;
}

@keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-560px);
    }
}


.numberScroll_7 {
    animation: numberScroll7 1.4s;
    -webkit-animation: numberScroll7 1.4s;
    animation-fill-mode: both;
}

@keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-640px);
    }
}


.numberScroll_8 {
    animation: numberScroll8 1.6s;
    -webkit-animation: numberScroll8 1.6s;
    animation-fill-mode: both;
}

@keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-720px);
    }
}


.numberScroll_9 {
    animation: numberScroll9 1.8s;
    -webkit-animation: numberScroll9 1.8s;
    animation-fill-mode: both;
}

@-webkit-keyframes numberScroll0 {
    0% {
        transform: translateY(0px);
    }

    80% {
        transform: translateY(-720px);
    }

    100% {
        transform: translateY(0px);
    }
}


.numberScroll_0 {
    animation: numberScroll0 1.6s;
    -webkit-animation: numberScroll0 1.6s;
    animation-fill-mode: both;
}
</style>